<template>
	<div class="overall">
		<div class="div_slideshow">
			<div class="div_slideshowFrame">
				<div  class="div_slideshowBand" :style="ee" ref='rew' >
					<div v-for="img in src">
						<img :src="img"/>
					</div>
				</div>
			</div>						
		</div>
		<div class="div_slideshowButton" v-show="button" ref='btn'>
			<button v-for="btn in btnCount"></button>
		</div>
	</div>
	
</template>

<script>
	export default {
		props:['src','button'],
		data(){
			return {
				btnCount:0,
				ee:'',
				number:null,
				Tsite:0,
				we:''
			}
		},
		created(){
			if(this.button===true)
			{
				this.btnCount=this.src.length;
			}
			this.src.unshift(this.src[this.src.length-1]);
			this.src.push(this.src[1]);
			this.ee='width:'+(this.src.length*100)+'%';
			
		},
		mounted() {
			var T=this;
			this.$nextTick(function(){
				T.forRoll();
				var div=this.$refs.rew;
				var btn=this.$refs.btn;
				new this.$event.touch({
					elem:div,
					status:0x10,
					touchStatus:function(e){
						clearInterval(T.number);
						if(e==='w')
						{
							//向左
							T.Tsite++
							if(T.Tsite>3)
							{
								T.Tsite=0;
								$(div).animate({'left':'-=100%'},200,function(){
									$(div).css('left','-100%');
								});
								$(btn).children().css('background','rgba(0,0,0,0.3)');
								$(btn).children().eq(T.Tsite).css('background','white');
								T.forRoll();
							}else{
								$(div).animate({'left':'-=100%'},200);
								$(btn).children().css('background','rgba(0,0,0,0.3)');
								$(btn).children().eq(T.Tsite).css('background','white');
								T.forRoll();
							}
						}else if(e==='e'){
							//向右
							T.Tsite--;
							if(T.Tsite<0)
							{
								T.Tsite=T.src.length-3;
								$(div).animate({'left':'+=100%'},200,function(){
									$(div).css('left','-'+(T.src.length-2)+'00%')
								});
								$(btn).children().css('background','rgba(0,0,0,0.3)');
								$(btn).children().eq(T.Tsite).css('background','white');
								T.forRoll();
							}else{
								$(div).animate({'left':'+=100%'},200);
								$(btn).children().css('background','rgba(0,0,0,0.3)');
								$(btn).children().eq(T.Tsite).css('background','white');
								T.forRoll();
							}
						}else{
							T.forRoll();
						}
					}
				});
			})
		},
		methods:{
			forRoll(){
				var div=this.$refs.rew;
				var btn=this.$refs.btn;
				var This=this;
				this.number=setInterval(function(){
					if(This.Tsite>2)
					{
						This.Tsite=0;
						$(div).animate({'left':'-=100%'},200,function(){
							$(div).css('left','-100%');
						});
						$(btn).children().css('background','rgba(0,0,0,0.3)');
						$(btn).children().eq(0).css('background','white');
						return false;
					}
					$(div).animate({'left':'-=100%'},200);
					$(btn).children().css('background','rgba(0,0,0,0.3)');
					$(btn).children().eq(This.Tsite+1).css('background','white');
					This.Tsite++;
				},2000);
				
			}
		}
	}
</script>

<style scoped>
	.overall{
		height: 100%;
		width: 100%;
		position: relative;
	}
	.div_slideshow{
		display: flex;
		justify-content:center;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.div_slideshowFrame{
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius:0.5rem ;	
		position: relative;
	}
	.div_slideshowBand{
		width: 600%;
		height: 100%;
		position: absolute;	
		display: flex;
		/* left: 0; */
		left: -100%;
	}
	.div_slideshowBand>div{
		/*flex: 0.2;*/
		width: 20%;
		height: 100%;
	}
	.div_slideshowBand>div>img{
		width: 100%;
		height: 100%;
	}
	/*div_slideshowButton*/  /*轮播图按钮组*/
	.div_slideshowButton{
		position: absolute;
		width: 100%;
		height: 0.7rem;
		display: flex;
		justify-content: center;
		bottom: 0;
	}
	.div_slideshowButton>button{
		width: 0.5rem;
		height: 0.1rem;
		margin: 0 0.2rem;
		background: rgba(0,0,0,0.3);
	}
	.div_slideshowButton>button:first-child{
		background: white;
	}
</style>
